<template>
	<view class="coinMask" v-show="isShowActi" @click="closePopActi()">
		<view class="couponBg" @click.stop>
			<view class="coinBg">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in couponList"
						:key="item.coupon_code">
						<view
							style="width: calc(100% - 40rpx);margin: 20rpx;height: 160rpx;background-color: rgb(251, 242, 230);border-radius: 12rpx;display: flex;align-items: center;">
							<image src="../../../static/images/CouponOrder/couponIcon.png"
								style="width: 160rpx;height: 160rpx;">
							</image>
							<view
								style="margin-left: 20rpx;display: flex;align-items: center;justify-content: space-between;width: calc(100% - 20rpx - 160rpx - 100rpx)">
								<view style=";color: #ea5550;font-size: 50rpx;">
									￥{{item.discount_amount}}
								</view>
								<view>{{item.description}}</view>
							</view>
							<view style="margin-left: 20rpx;">
								<radio :value="item.coupon_code" :checked="index === current" />
							</view>
						</view>

					</label>
				</radio-group>
			</view>
			<button class="couponsure" @click="sureCoupon()">确定</button>
		</view>

	</view>
</template>

<script>
	import animationType from '@/utils/animationType.js'

	const comUrl = "https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/";
	export default {
		props: {
			couponList: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				current: 0,
				//popbg: comUrl + 'popbg.png',
				popbg: '../../../static/images/portraitMaster/pop/popbg.png',
				couponIcon: '../../../static/images/CouponOrder/couponIcon.png',
				buyIcon: '../../../static/images/CouponOrder/buyIcon.png',
				pic: '',
				isShowActi: false,
				closeImg: 'https://pic.mae.vip//crmebimage/public/maintain/2024/09/10/71f1a9aba07d46fdb88b81562904236fwes70ule49.png',
				userId: '',
				token: '',
			}
		},
		methods: {
			sureCoupon() {
				let that = this;
				that.isShowActi = false;

				that.$emit('getCoupon', {
					couponMoney: that.couponList[that.current].discount_amount,
					couponId: that.couponList[that.current].id,
				});
			},
			radioChange: function(evt) {

				let that = this;
				for (let i = 0; i < that.couponList.length; i++) {
					if (that.couponList[i].coupon_code === evt.detail.value) {
						that.current = i;
						break;
					}
				}
			},
			closePopActi() {
				let that = this;
				that.isShowActi = false;
			},
			showPop() {
				let that = this;
				that.isShowActi = true;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.coinMask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/deep/.uni-radio-input-checked {
		background-color: #ea5550 !important;
		border-color: #ea5550 !important;
	}

	.couponBg {
		width: 100%;
		height: 50vh;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: white;
	}

	.coinBg {
		width: 100%;
		height: calc(50vh - 120rpx);
		z-index: 100;
		background-color: white;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		overflow-y: scroll;
	}

	.couponsure {
		background-color: #ea5550;
		color: white;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		width: calc(100% - 60rpx);
		z-index: 101;
	}
</style>